<template>
  <div :class="$style.{{ camelCase componentName }}">
    <vue-grid>
      <vue-grid-row>
        <vue-grid-item fill>
          <h1>{{ properCase componentName }}</h1>
        </vue-grid-item>

        <vue-grid-item fill>
          <vue-button
            :loading="incrementPending"
            @click='increment'
            accent>Increment +1
          </vue-button>
          <br/>
          <br/>
        </vue-grid-item>
        <vue-grid-item fill>
          <vue-button
            :loading="decrementPending"
            @click='decrement'
            primary>Decrement -1
          </vue-button>
          <h3>Count is \{{ count }}</h3>
        </vue-grid-item>
      </vue-grid-row>
    </vue-grid>
  </div>
</template>

<script lang="ts">
  import { mapActions, mapGetters } from 'vuex';
  import { IPreLoad }               from '../../../server/isomorphic';
  import VueGrid                    from '../../shared/components/VueGrid/VueGrid.vue';
  import VueGridItem                from '../../shared/components/VueGridItem/VueGridItem.vue';
  import VueButton                  from '../../shared/components/VueButton/VueButton.vue';
  import VueGridRow                 from '../../shared/components/VueGridRow/VueGridRow.vue';

  export default {
    metaInfo:   {
      title: '{{ properCase componentName }}',
    },
    components: {
      VueGrid,
      VueGridItem,
      VueButton,
      VueGridRow,
    },
    methods:    {
      ...mapActions('{{ camelCase moduleName }}', [
        'increment',
        'decrement',
      ]),
    },
    computed:   {
      ...mapGetters('{{ camelCase moduleName }}', ['count', 'incrementPending', 'decrementPending']),
    },
    prefetch:   (options: IPreLoad) => {
      return options.store.dispatch('{{ camelCase moduleName }}/increment');
    },
  };
</script>


<style lang="scss" module>
  @import "../../shared/styles";

  .{{ camelCase componentName }} {
    margin-top: $nav-bar-height;
    min-height: 500px;
  }
</style>
